---
title: Performance Benchmarks | gluestack-ui
description: gluestack-ui harnesses the power of gluestack-style, a universal and highly performant styling library, to create beautifully styled components. With a babel plugin for pre-computing styles during the build process, and runtime performance optimizations, gluestack-style delivers high performance styling, even in the most demanding applications.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Graph } from './Progress';

<Meta title="ui/Home/Performance/Benchmarks" />

# Performance Benchmarks

`gluestack-ui` harnesses the power of [`gluestack-style`](https://gluestack.io/style), a universal and highly performant styling library, to create beautifully styled components. **With a babel plugin for pre-computing styles during the build process, and runtime performance optimizations, gluestack-style delivers high performance styling, even in the most demanding applications.**

# React Native

We performed the [benchmarks](https://github.com/gluestack/gluestack-ui-benchmarks) with some famous React Native libraries like gluestack-ui, Tamagui, NativeBase, Styled Components and React Native built-in styling.

**In each case we have rendered 1000 components with styling of each library. Results are average of 5 mounts.**

> **All the benchmarks were measured in production environment on iPhone 13.**

## Simple Component

The time it takes to render a simple themed component. We've developed a Box component using View with some default styles.

<Graph
  data={{
    'gluestack-ui': 156,
    'React Native': 78,
    'Tamagui': 170,
    'Styled Components': 94,
    'NativeBase': 529,
  }}
/>

## Component with variants

The time needed to render a component with different variations. We've developed a Box component using View with default styles and multiple variants.

<Graph
  data={{
    'gluestack-ui': 170,
    'React Native': 78,
    'Tamagui': 196,
    'Styled Components': 106,
    'NativeBase': 619,
  }}
/>

> Styled Components doesn't have built-in support for variants. We've incorporated prop-based variants into Styled Components.

## Component with default theme and inline styles

A component with default themes, variations, inline styles, and state styles. We've designed a Button component using Pressable with default style, variations, state style, and inline styles.

<Graph
  data={{
    'gluestack-ui': 358,
    'Tamagui': 510,
    'NativeBase': 1078,
  }}
/>

> React Native and Styled Components doesn't provide out of the box support for state styling.

## Layout using HStack, VStack, Image and Text

Creating a layout with HStack, VStack, Image, and Text to display a list of 28 items. We've utilized components from the following libraries for this purpose.

<Graph
  data={{
    'gluestack-ui': 120,
    'React Native': 69,
    'Tamagui': 90,
    'NativeBase': 491,
  }}
/>

> Note: This test was taken from [Tamagui](https://github.com/tamagui/tamagui/tree/24ac758bbe5d6ff2f67f25071df4286e0594f578/starters/benchmark).

# Web

We are actively working on benchmarks for web, updates will be available soon.
